import React, {useState} from 'react';
import {Box, Card, CardContent, CardHeader, IconButton, Paper, Popover, Stack, Typography} from "@mui/material";
import ContentCopyIcon from "@mui/icons-material/ContentCopy";
import QrCodeIcon from "@mui/icons-material/QrCode";
import DialogTitle from "@mui/material/DialogTitle";
import Dialog from "@mui/material/Dialog";
import QRCode from "qrcode.react";

const MyLink = ({href, text}) => {

    const [url, setUrl] = useState('');
    const [qrCodeOpen, setQrCodeOpen] = useState(false);

    const [copyOkOpen, setCopyOkOpen] = useState(false);
    const [anchorEl, setAnchorEl] = useState(null);

    function showQrCode(url) {
        setUrl(`${process.env.REACT_APP_HOST}${url}`);
        setQrCodeOpen(true);
    }

    return (
        <Stack direction="row" spacing={1} alignItems="center">
            <Typography>{text}</Typography>
            <IconButton size="small" onClick={() => showQrCode(href)}><QrCodeIcon/></IconButton>

            <Dialog open={qrCodeOpen} onClose={() => setQrCodeOpen(false)}>
                <DialogTitle sx={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
                    <Typography variant="title">注册链接</Typography>
                    <Box>
                        <IconButton size="small" onClick={(event) => {
                            const button = event.currentTarget;
                            navigator.clipboard.writeText(url)
                                .then(() => {
                                    setAnchorEl(button);
                                    setCopyOkOpen(true);
                                    setTimeout(() => setCopyOkOpen(false), 1000);
                                });
                        }}>
                            <ContentCopyIcon/>
                        </IconButton>
                        <Popover
                            id="copy-popover" open={copyOkOpen} anchorEl={anchorEl}
                            anchorOrigin={{vertical: 'bottom', horizontal: 'right',}}
                            onClose={() => {
                                setCopyOkOpen(false);
                                setAnchorEl(null);
                            }}>
                            <Typography p={1} variant="body2">链接地址已复制</Typography>
                        </Popover>
                    </Box>
                </DialogTitle>
                <Box p={2} component={Paper}>
                    <QRCode style={{cursor: 'pointer'}} value={url} size={256}
                            onClick={() => window.open(url, '_blank')}/>
                </Box>
            </Dialog>
        </Stack>
    )
};

function ShareLink({principal, schoolId, userId, code}) {
    return (
        <Card raised sx={{padding: 2, boxSizing: 'border-box', width: '100%'}}>
            <CardHeader title="链接"/>
            <CardContent>
                {principal ? (<Stack spacing={2}>
                    <MyLink href={`/register?teacher=${schoolId}`} text="老师注册链接"/>
                    <MyLink href={`/school/${code}`} text="家长注册链接"/>
                    <MyLink href={`/register?referrer=${schoolId}`} text="推广人注册链接"/>
                </Stack>) : (
                    <MyLink href={`/register?parent=${userId}`} text="子女注册链接"/>
                )}

            </CardContent>
        </Card>
    );
}

export default ShareLink;
